<!--组件轮播-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-if="!$store.state.release.pageMetadata" class="w-h-full">
      <div class="not-data-message" v-show="component.compConfigData.carouselCompList.length == 0">未选择目标组件</div>
      <Tag color="primary" v-for="(cc, index) in component.compConfigData.carouselCompList" :key="index">
        {{index+1}}、{{cc.layoutItemName}}
      </Tag>
    </div>
    <swiper v-if="$store.state.release.pageMetadata" ref="compSwiper" class="w-h-full" :options="swiperOption">
      <swiper-slide></swiper-slide>
      <swiper-slide class="w-h-full" v-for="(comp, index) in component.compConfigData.carouselCompList" :key="index">
        <component :is="comp.componentName" :location="comp.layoutItemId"></component>
      </swiper-slide>
      <div v-show="component.compConfigData.option.showNavigation" class="swiper-button-prev" slot="button-prev"></div>
      <div v-show="component.compConfigData.option.showNavigation" class="swiper-button-next" slot="button-next"></div>
    </swiper>

  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'

  const _this = {
    name: 'ComponentCarouselComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    components: {
      swiper,
      swiperSlide
    },
    attr: {
      version: '1.0',
      configDataTemp: Object.assign({

        carouselCompList: [],

        option: {
          speed: 300, // 切换速度
          showNavigation: false,
          autoplay: {
            open: true,
            delay: 10
          }
        }

      }, PnDesigner.buildFuncCompGlobalField())
    },
    data() {
      return {
        index: 1
      }
    },
    mounted() {
      this.init();

      if (this.$store.state.release.pageMetadata) {
        this.swiper.on('slideNextTransitionStart', (e)=>{
          if (this.swiper.activeIndex == this.component.compConfigData.carouselCompList.length + 2) {
            this.swiper.slideNext(this.component.compConfigData.option.speed, false)
          }
        })
      }

      this.$EventBus.$on('pn_deleteLayoutItem', (layoutItemId) => {
        if (layoutItemId != this.location) {
          for (let i=0; i<this.component.compConfigData.carouselCompList.length; i++) {
            if (this.component.compConfigData.carouselCompList[i].layoutItemId == layoutItemId) {
              this.component.compConfigData.carouselCompList.splice(i, 1)
              i--
            }
          }
        }
      })
    },
    beforeDestroy() {
      this.$EventBus.$off('pn_deleteLayoutItem')
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      }
    },
    computed: {
      swiperOption () {
        let option = {
          initialSlide: 1,
          slidesPerView: 1, // 设置同时显示的slides数量
          spaceBetween: 30, // slide之间的距离
          loop: true,
          speed: this.component.compConfigData.option.speed,
          // keyboard: {
          //   enabled: true,
          // },
          // autoplay: {
           //   delay: 1000
          // },
          // pagination: {
          //   el: '.swiper-pagination',
          //   clickable: true
          // },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
        if (this.$store.state.release.pageMetadata) {
          if (this.component.compConfigData.option.autoplay.open) {
            option.autoplay = {
              delay: this.component.compConfigData.option.autoplay.delay * 1000,
              disableOnInteraction: false
            }
          }
        }
        return option
      },
      swiper() {
        return this.$refs.compSwiper.swiper
      }
    }
  };

  export default _this
</script>

<style scoped>
  .not-data-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
